<template>
  <div class="w-full max-w-[600px] p-10 bg-white rounded-lg shadow-xl">
    <h2 class="text-center mb-8 text-2xl text-gray-800">用户注册</h2>
    <form @submit.prevent="handleRegister" class="space-y-6">
      <!-- 用户名 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-600">用户名</label>
        <input
            v-model="username"
            type="text"
            required
            placeholder="请输入用户名"
            class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
        />
      </div>

      <!-- 邮箱 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-600">邮箱</label>
        <input
            v-model="email"
            type="email"
            required
            placeholder="请输入邮箱"
            class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
        />
      </div>

      <!-- 密码 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-600">密码</label>
        <input
            v-model="password"
            type="password"
            required
            placeholder="请输入密码"
            class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
        />
      </div>

      <!-- 确认密码 -->
      <div class="space-y-2">
        <label class="block text-sm font-medium text-gray-600">确认密码</label>
        <input
            v-model="confirmPassword"
            type="password"
            required
            placeholder="请再次输入密码"
            class="w-full px-4 py-2 border rounded-md focus:ring-2 focus:ring-emerald-500"
        />
      </div>

      <!-- 错误提示 -->
      <div v-if="errorMessage" class="text-red-500 text-sm">
        {{ errorMessage }}
      </div>

      <!-- 注册按钮 -->
      <button
          type="submit"
          class="w-full py-2 bg-[#02f8c3ff] hover:bg-emerald-600"
      >
        注册
      </button>

      <!-- 底部链接 -->
      <div class="mt-4 text-center text-gray-600">
        已有账号？<router-link to="/login" class="text-emerald-500">立即登录</router-link>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      errorMessage: ''
    }
  },
  methods: {
    handleRegister() {
      if (this.password !== this.confirmPassword) {
        this.errorMessage = '两次输入的密码不一致'
        return
      }

      const users = JSON.parse(localStorage.getItem('users')) || []
      const isExist = users.some(u => u.username === this.username || u.email === this.email)

      if (isExist) {
        this.errorMessage = '用户名或邮箱已被注册'
      } else {
        users.push({
          username: this.username,
          email: this.email,
          password: this.password
        })
        localStorage.setItem('users', JSON.stringify(users))
        alert('注册成功，请登录')
        this.$router.push('/login')
      }
    }
  }
}
</script>